<!--  -->
<template>
<div class=''>
  <el-row>
    <el-col :span="24">
      <el-steps :active="step" finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="规格参数"></el-step>
        <el-step title="销售属性"></el-step>
        <el-step title="SKU信息"></el-step>
        <el-step title="保存完成"></el-step>
      </el-steps>
      <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    </el-col>
    <el-col :span="24" v-show="step==0">
      <el-card class="box-card" style="width:80%;margin:20px auto">
        <el-form ref="spuBaseForm" :model="spu" label-width="120px" :rules="spuBaseInfoRules">
          <el-form-item label="商品名称" prop="spuName">
            <el-input v-model="spu.spuName"></el-input>
          </el-form-item>
          <el-form-item label="商品描述" prop="spuDescription">
            <el-input v-model="spu.spuDescription"></el-input>
          </el-form-item>
          {{spu.catelogIds}}
          <el-form-item label="选择分类" prop="catelogIds">
            <category-cascader :catelogPath.sync="spu.catelogIds"></category-cascader>
          </el-form-item>
          <el-form-item label="选择品牌" prop="brandId">
            <!-- <brand-select></brand-select> -->
            <el-select v-model="spu.brandId" clearable placeholder="请选择">
              <el-option
                v-for="item in brands"
                :key="item.brandId"
                :label="item.brandName"
                :value="item.brandId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品重量(Kg)" prop="weight">
            <el-input-number v-model.number="spu.weight" :min="0" :precision="3" :step="0.1"></el-input-number>
          </el-form-item>
          <el-form-item label="设置积分" prop="bounds">
            <label>金币</label>
            <el-input-number
              style="width:130px"
              placeholder="金币"
              v-model="spu.bounds.buyBounds"
              :min="0"
              controls-position="right"
            ></el-input-number>
            <label style="margin-left:15px">成长值</label>
            <el-input-number
              style="width:130px"
              placeholder="成长值"
              v-model="spu.bounds.growBounds"
              :min="0"
              controls-position="right"
            >
              <template slot="prepend">成长值</template>
            </el-input-number>
          </el-form-item>
          <el-form-item label="商品介绍" prop="decript">
            <multi-upload v-model="spu.decript"></multi-upload>
          </el-form-item>

          <el-form-item label="商品图集" prop="images">
            <!-- <multi-upload v-model="spu.images"></multi-upload> -->
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="collectSpuBaseInfo">下一步：设置基本参数</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import CategoryCascader from '../common/category-cascader'
// import BrandSelect from '../common/brand-select'
import MultiUpload from '@/components/upload/multiUpload'
export default {
// import引入的组件需要注入到对象中才能使用
  components: {
    CategoryCascader,
    MultiUpload
  },
  data () {
// 这里存放数据
    return {
      brands: [],
      step: 0,
      catId: 0,
      spu: {
        catelogIds: [2, 35, 221],
        // 要提交的数据
        spuName: '',
        spuDescription: '',
        catalogId: 0,
        brandId: '',
        weight: '',
        publishStatus: 0,
        decript: [], // 商品详情
        images: [], // 商品图集，最后sku也可以新增
        bounds: {
          // 积分
          buyBounds: 0,
          growBounds: 0
        },
        baseAttrs: [], // 基本属性
        skus: [], // 所有sku信息,
        dataResp: {
         // 后台返回的所有数据
          attrGroups: [],
          baseAttrs: [],
          saleAttrs: [],
          tempSaleAttrs: [],
          tableAttrColumn: [],
          memberLevels: [],
          steped: [false, false, false, false, false]
        }
      },
      spuBaseInfoRules: {
        spuName: [
          { required: true, message: '请输入商品名字', trigger: 'blur' }
        ],
        spuDescription: [
          { required: true, message: '请编写一个简单描述', trigger: 'blur' }
        ],
        catelogIds: [
          { type: 'array', required: true, message: '请选择一个分类', trigger: 'change' }
        ],
        brandId: [
          { required: true, message: '请选择一个品牌', trigger: 'blur' }
        ],
        decript: [
          { required: true, message: '请上传商品详情图集', trigger: 'blur' }
        ],
        images: [
          { required: true, message: '请上传商品图片集', trigger: 'blur' }
        ],
        weight: [
          {
            type: 'number',
            required: true,
            message: '请填写正确的重量值',
            trigger: 'blur'
          }
        ]
      }
    }
  },
// 监听属性 类似于data概念
  computed: {},
// 监控data中的数据变化
  watch: {
    'spu.catelogIds' (v) {
      if (v.length > 0) {
        let catId = v[v.length - 1]
        this.getCatBrands(catId)
      } else {
        this.brands = []
        this.spu.brandId = null
      }
    }
  },
// 方法集合
  methods: {
    /**
     * 获取积分等级
     */
    getMemberLevels () {
      this.$http({
        url: this.$http.adornUrl('/member/memberlevel/list'),
        method: 'get',
        params: this.$http.adornParams({})
      }).then(({data}) => {
        console.log('member list:', data)
        this.dataResp.memberLevels = data.data
      })
    },
    /**
     * 根据分类id获取品牌
     */
    getCatBrands (catId) {
      this.$http({
        url: this.$http.adornUrl('/product/categorybrandrelation/brands/list'),
        method: 'get',
        params: this.$http.adornParams({
          catId
        })
      }).then(({ data }) => {
        this.brands = data.data
      })
    },
    next () {
      if (this.step++ > 4) this.step = 0
    },
    collectSpuBaseInfo () {
      // spuBaseForm
      this.$refs.spuBaseForm.validate(valid => {
        if (valid) {
          alert('ok')
          // this.step = 1
          // this.showBaseAttrs()
        } else {
          return false
        }
      })
    }
  },
// 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.getCatBrands()
  },
// 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    // 获取积分等级
    this.getMemberLevels()
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
</style>